<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }

   .title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }
</style>

<body>
    <div id="app">
        <div class="title">注册</div>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" @blur="validateUsername" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" @blur="validatePassword" />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="ruleForm.confirmPassword" @blur="validateConfirmPassword" />
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="ruleForm.age" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="hobbies">
                <el-checkbox-group v-model="ruleForm.hobbies">
                    <el-checkbox label="阅读"></el-checkbox>
                    <el-checkbox label="运动"></el-checkbox>
                    <el-checkbox label="旅行"></el-checkbox>
                    <el-checkbox label="数码"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="职业" prop="occupation">
                <el-select v-model="ruleForm.occupation" placeholder="请选择职业">
                    <el-option label="前端开发工程师" value="前端开发工程师"></el-option>
                    <!-- 添加更多职业选项 -->
                </el-select>
            </el-form-item>
            <el-form-item label="自我介绍" prop="introduction">
                <el-input type="textarea" v-model="ruleForm.introduction" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">
                    提交
                </el-button>
                <el-button @click="resetForm">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </div>
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const App = {
            data() {
                return {
                    ruleForm: {
                        username: '',
                        password: '',
                        confirmPassword: '',
                        age: '',
                        gender: '男',
                        hobbies: [],
                        occupation: '',
                        introduction: ''
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 4, message: '用户名长度至少为 4 个字符', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur' }
                        ],
                        confirmPassword: [
                            { required: true, message: '请输入确认密码', trigger: 'blur' }
                        ],
                        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
                        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
                        occupation: [{ required: true, message: '请选择职业', trigger: 'change' }],
                        introduction: [{ required: true, message: '请输入自我介绍', trigger: 'blur' }]
                    },
                    passwordError: '',
                    confirmPasswordError: ''
                };
            },
            methods: {
                submitForm() {
                    const formRef = this.$refs.ruleFormRef;
                    formRef.validate((valid) => {
                        if (valid) {
                            if (this.ruleForm.password === this.ruleForm.confirmPassword) {
                                console.log('提交成功', this.ruleForm);
                                this.$message.success('提交成功！');
                            } else {
                                this.$message.error('两次输入的密码不一致');
                            }
                        } else {
                            console.log('表单验证失败');
                            this.$message.error('表单验证失败，请检查必填项！');
                            return false;
                        }
                    });
                },
                resetForm() {
                    const formRef = this.$refs.ruleFormRef;
                    formRef.resetFields();
                    this.passwordError = '';
                    this.confirmPasswordError = '';
                },
                validateUsername() {
                    const formRef = this.$refs.ruleFormRef;
                    formRef.validateField('username');
                },
                validatePassword() {
                    const formRef = this.$refs.ruleFormRef;
                    formRef.validateField('password');
                    if (this.ruleForm.password.length < 6) {
                        this.passwordError = '密码长度至少为 6 个字符';
                    } else {
                        this.passwordError = '';
                    }
                },
                validateConfirmPassword() {
                    const formRef = this.$refs.ruleFormRef;
                    formRef.validateField('confirmPassword');
                    if (this.ruleForm.confirmPassword!== this.ruleForm.password) {
                        this.confirmPasswordError = '两次输入的密码不一致';
                    } else {
                        this.confirmPasswordError = '';
                    }
                }
            },
            watch: {
                'ruleForm.password': function (newValue) {
                    if (newValue.length < 6) {
                        this.passwordError = '密码长度至少为 6 个字符';
                    } else {
                        this.passwordError = '';
                    }
                },
                'ruleForm.confirmPassword': function (newValue) {
                    if (newValue!== this.ruleForm.password) {
                        this.confirmPasswordError = '两次输入的密码不一致';
                    } else {
                        this.confirmPasswordError = '';
                    }
                }
            }
        };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
        console.log('Vue 应用已挂载');
    </script>
</body>

</html>